<template name="loadmore">
	<view id="loading" style="height:30px;" @loading="onLoading" :style="{width:screenWidth}" class="load-more-div"
	 :display="loading ? 'show':'hide'">
		<text class="load-more-div-text">{{ loadingText[loadMoreStatus] }}</text>
	</view>
</template>

<script>
	export default {
		name:'loadmore',
		props: {
			loadingText: {
				type: Array,
				default: ['', '加载中...', '没有更多啦']
			}
		},
		data() {
			return {
				loadMoreStatus: 0,
				loading: false,
				screenWidth: 750,
				loadingIcon: [
					'',
					'',
					''
				]
			};
		},
		watch: {
			loading(newValue) {
				console.log(newValue)
			}
		},
		created() {
			this.screenWidth = uni.getSystemInfoSync().windowWidth;
		},
		methods: {
			onLoading() {
				this.loadMoreStatus = 1;
				this.loading = true
				this.$emit('loadMore');
			},
			finish(hasMore = true) {
				this.loadMoreStatus = hasMore ? 1 : 2;
				setTimeout(() => {
					this.loadMoreStatus = 0;
					this.loading = false
				}, 500)
			}
		}
	};
</script>

<style>
	.load-more-div {
		height: 30px;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		align-items: center;
	}

	.load-more-div-text {
		font-size: 14px;
		color: #999;
		line-height: 30px;
		text-align: center;
	}
</style>
